<template>
  <div class="">
    <myHeader
      :valueS="searchValue"
      @search="search"
      @fValue="fValue"
    ></myHeader>
    <history v-show="obj.length == 0" @fValue="fValue"></history>
    <div class="list" v-for="(v, i) in obj" :key="i">
      {{ v.goods_name }}
    </div>
  </div>
</template>

<script>
import myHeader from "../components/myHeader.vue";
import history from "../components/history.vue";
import axios from "axios";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  setup(props, { emit }) {
    let obj = ref([]);
    let store = useStore();
    let searchValue = ref("");
    function search(e) {
      axios
        .get(
          "https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=" +
            e
        )
        .then((res) => {
          obj.value = res.data.message;
          console.log(res.data.message);
        });
      store.commit("pushSearch", e);
    }
    return {
      obj,
      search,
      fValue,
      searchValue,
    };
    
  },
  components: { myHeader, history },
};
</script>

<style lang="scss" scoped>
.list{
  margin: 10px ;
  background-color: #ccc;
}
</style>
